<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>chat</title>-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
<!--    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">-->
<!--</head>-->
<head>
    <meta charset="UTF-8" />
    <title>chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <style>
        /* 设置全局字体 */
        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
        }

        /* 设置导航栏样式 */
        .navbar {
            background-color: #007bff;
            color: #fff;
        }
        .navbar-brand {
            font-size: 24px;
            font-weight: bold;
        }

        /* 设置主要内容区域样式 */
        main {
            margin-top: 20px;
            margin-bottom: 60px; /* 给“返回顶部”按钮留出空间 */
        }
        #app {
            display: flex;
            flex-flow: column;
            margin: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        #app textarea {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            margin-right: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        #app button {
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #app button:hover {
            background-color: #0056b3;
        }
        #res {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* 设置“返回顶部”按钮样式 */
        .to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none; /* 默认不显示 */
        }
        .to-top:hover {
            background-color: #0056b3;
        }
        .to-top.show {
            display: block; /* 显示 */
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>
<body>
<header>
    <a>ChatGPT</a>
    <nav>
        <ul>
            <li><a th:href="@{/index}">Home</a></li>
            <li><a href="https://platform.openai.com/overview">About</a></li>
            <li><a href="https://chat.openai.com/chat">Contact</a></li>
        </ul>
    </nav>
</header>
<!--<div th:replace="~{common/header::header(activeUrl='index.html')}"></div>-->

<main role="main">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <div id="app" style="display: flex;flex-flow: column;margin: 20px">
        <div style="display: flex;justify-content: center;align-items: center;margin: 20px">
        <textarea type="text" v-model="info" cols="40" rows="3" style="margin: 15px">

        </textarea>
            <button v-on:click="ask()" class="btn btn-secondary" role="button">SEND</button>
        </div>
        <img th:src="@{/images/logo/chat.jpg}" style="width: 30px;height:30px;border-radius: 50%;" alt="">
        <div style="display: flex;justify-content: center;align-items: center;margin: 10px">

            <textarea name="res" id="res" cols="100" rows="20" >{{res}}</textarea>
        </div>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    info: '问我一点东西吧~~~',
                    res: '',
                    api: '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'
                }
            },
            methods: {
                ask() {
                    this.res = 'WAITTING。。。。。。'
                    axios.post('https://api.openai.com/v1/completions', {
                        prompt: this.info, max_tokens: 2048, model: "text-davinci-003"
                    }, {
                        headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.api }
                    }).then(response => { this.res = response.data.choices[0].text })

                }
            }
        }).mount('#app')
    </script>
</main>
<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>

</body>
</html>
